<template >
    <div class="top">
        <div class="Button_image">
            <div class="block2">
                <div class="src4">
                    <el-input
                        v-model="select"
                        prefix-icon="el-icon-search"
                        style="width: 360px; border-radius: 4px; border: 1px solid gray"
                        placeholder="请输入内容"
                    ></el-input>
                </div>
                <div class="src3">
                    <el-image :src="querys" style="height:70px;width:110px" @click="slect"></el-image>
                </div>
            </div>
        </div>
        <div class="tabbox">
            <el-table
                ref="multipleTable"
                :data="tableData"
                border
                :header-row-style="{ background: '#005ab5', color: '#ffffff' }"
                tooltip-effect="dark"
                style="width: 100%; margin: 0 auto"
            >
                <el-table-column prop="userName" label="登录名" align="center"  min-width="12%"> </el-table-column>
                <el-table-column prop="name" label="姓名" min-width="12%" align="center"> </el-table-column>
                <el-table-column prop="type" label="操作类型" min-width="12%" align="center"> </el-table-column>
                <el-table-column prop="content" label="操作内容" min-width="12%" align="center"> </el-table-column>
                <el-table-column prop="time" label="操作时间" min-width="12%" align="center"> </el-table-column>
                <el-table-column prop="ipAddress" label="IP地址" min-width="10%" align="center"> </el-table-column>
            </el-table>
            <div class="page-body">
                <div class="pagenum_sys">
                    <p>第{{ pageData.page }}页&nbsp;&nbsp;每页{{ pageData.pageSize }}条&nbsp;&nbsp;共{{ pageData.total }}条</p>
                </div>
                <div class="page_sys">
                    <el-button type="text" @click="toPage(1)">首页</el-button>
                    <el-button type="text" @click="prePage()">上一页</el-button>
                    <el-button type="text" @click="nextPage()">下一页</el-button>
                    <el-button type="text" @click="toPage(-1)">末页</el-button>
                    <el-button type="text" style="color: #333">第</el-button>&nbsp;
                    <el-input style="width: 76px" v-model="pageNum" clearable></el-input>&nbsp;
                    <el-button type="text" style="color: #333">页</el-button>
                    <el-button type="text" @click="toPage(pageNum)">转到</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import '../../assets/css/jdCommon.css';
// import syste from '@/api/system_setting/syste_manager.js';
export default {
    data() {
        return {
            querys: require('../../assets/imgs/查询按钮.png'),
            query_box: require('../../assets/imgs/查询框.png'),
            input: '',
            pageData: {
                page: 1,
                pageSize: 10,
                total: ''
            },
            pageNum: null,
            tableData: [],
            select: '',
        };
    },
    created(){
        this.getlist()
    },
    methods: {
        // 列表
        getlist(){
            let param= {
                page: this.pageData.page,
                pageSize: this.pageData.pageSize,
                word:this.select
            }
            this.$post('sysManage/sysLog/page',param).then((res) => {
                this.tableData = res.data.rows;
                this.pageData.total = res.data.total;
            });
        },
        // 搜索框
        slect(){
            let param= {
                page: this.pageData.page,
                pageSize: this.pageData.pageSize,
                word:this.select
            }
            this.$post('sysManage/sysLog/page',param).then((res) => {
                this.tableData = res.data.rows;
                this.pageData.total = res.data.total;
            });
        },
        prePage() {
            // 上一页
            let page = this.pageData.page;
            if (page === 1) return;
            page--;
            this.pageData.page = page;
            this.getlist();
        },
        nextPage() {
            // 下一页
            let total = Math.ceil(this.pageData.total / this.pageData.pageSize);
            let page = this.pageData.page;
            if (page === total) return;
            page++;
            this.pageData.page = page;
            this.getlist();
        },
        toPage(num) {
            // 走一页
            let total = Math.ceil(this.pageData.total / this.pageData.pageSize);

            if (num > total || num === -1) {
                num = total;
            } else if (num < 1) {
                num = 1;
            }

            this.pageData.page = num;
            this.getlist();
        },
          changeLayout (type) {
            let $ = this.$
            if (type === 1) {
                $('.right_box').show()
                $('.left-2').css('cssText', 'position: relative;width: 100%;')
            } else if (type === 2) {
                $('.right_box').hide()
                $('.left-2').css('cssText', 'position: absolute;width: 98%;')
            }
        }
    },
     mounted(){
         this.changeLayout(2)
    },
     destroyed() {
        this.changeLayout(1)
    }
};
</script>

<style scoped>
.Button_image {
    margin-top: 1%;
    margin-left: 2%;
}
.src4 {
    margin-top: 3%;
    float: left;
}
.src3 {
    float: right;
}
.src5 {
    margin: 0 auto;
}
</style>